<template>
	<div id="maccommodity">
		<van-row id="maccommodityone">
			<van-col :span="12" v-for="item in maccommodity" class="one">
				<van-row class="macaboutimgs">
					<img :src="url+item.original_img" class="macaboutimg">
				</van-row>
				<van-row class="macabouttitles">
					{{item.goods_name}}
				</van-row>
				<van-row class="macaboutslots">
					此处为插槽
				</van-row>
				<van-row class="macaboutprices">
					<span style="font-size: 0.9375rem;">￥</span>{{item.market_price}}
				</van-row>
				<van-row class="macaboutcontents">
					{{item.store_count}}w万+好评
				</van-row>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	export default
	{
		data()
		{
			return{
				maccommodity:[],
				url:'https://img.9lele.com'
			}
		},
		created()
		{
			// 分类id
			let id=this.$route.query.id
			this.$nextTick(function()
			{
				this.$store.dispatch('picture/vuexMacCommodity',id)
				.then(e=>
				{
					console.log(e.data.data)
					this.maccommodity=e.data.data
				})
			})
		}
	}
</script>

<style>
	#maccommodity{
		width: 100%;
		height: 100%;
	}
	#maccommodityone{
		width: 100%;
		height: 100%;
	}
	.one{
		width: 48%;
		height: 400px;
		margin-top: 30px;
		margin-left: 1%;
	}
	.macaboutimgs{
		width: 100%;
		height: 230px;
	}
	.macaboutimg{
		width: 100%;
		height: 100%;
	}
	.macabouttitles{
		width: 95%;
		height: 60px;
		line-height: 30px;
		text-align: left;
		padding-left: 5%;
		margin-top: 5px;
		font-weight: bold;
		
		/* 变成点 */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.macaboutslots{
		width: 95%;
		height: 30px;
		line-height: 30px;
		text-align: left;
		padding-left: 5%;
		margin-top: 5px;
	}
	.macaboutprices{
		width: 95%;
		height: 30px;
		line-height: 30px;
		color: red;
		text-align: left;
		padding-left: 5%;
		font-size: 1.5625rem;
		margin-top: 5px;
	}
	.macaboutcontents{
		width: 95%;
		height: 30px;
		line-height: 30px;
		text-align: left;
		padding-left: 5%;
		margin-top: 5px;
		color: #ccc;
	}
</style>
